<template>
  <div class="snow-page">
    <div class="snow-inner">

      <a-card class="margin-top" :bordered="false">
        <a-row align="center">
          <a-col :span="24">
            <a-tabs :type="type" :size="size">
              <a-tab-pane key="1" title="废水">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns"
                  :data="tableData" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
                  :pagination="pagination" @page-change="pageChange" @page-size-change="pageSizeChange">


                  <template #optional>
                    <a-space>
                      <a-button size="mini" type="primary">详情</a-button>
                      <a-button size="mini">修改</a-button>
                      <a-popconfirm content="确定删除这条数据吗?" type="warning">
                        <a-button size="mini" type="primary" status="danger">删除</a-button>
                      </a-popconfirm>
                    </a-space>
                  </template>
                </a-table>
              </a-tab-pane>
              <a-tab-pane key="2" title="废气">
                <a-table row-key="key" size="small" :bordered="{
                  cell: true
                }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns2"
                  :data="tableData2" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys"
                  :pagination="pagination" @page-change="pageChange" @page-size-change="pageSizeChange">


                  <template #optional>
                    <a-space>
                      <a-button size="mini" type="primary">详情</a-button>
                      <a-button size="mini">修改</a-button>
                      <a-popconfirm content="确定删除这条数据吗?" type="warning">
                        <a-button size="mini" type="primary" status="danger">删除</a-button>
                      </a-popconfirm>
                    </a-space>
                  </template>
                </a-table>
              </a-tab-pane>

            </a-tabs>
          </a-col>
          <a-col :span="24"> </a-col>
        </a-row>
      </a-card>

    </div>
  </div>
</template>

<script setup lang="ts">
import { getCommonTableListAPI } from "@/api/modules/table/index";
import { List, FormData, RowSelection, Pagination } from "./config";
const formData = reactive<FormData>({
  form: {
    name: "",
    phone: "",
    email: "",
    address: "",
    status: null
  },
  search: false
});
const type = ref("rounded");
const size = ref("medium");
const selectedKeys = ref<string[]>([]);
const rowSelection = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});
const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange = (page: number) => {
  pagination.value.current = page;
};
const pageSizeChange = (pageSize: number) => {
  pagination.value.pageSize = pageSize;
};
const tableData = ref([
  {
    "HL": "崇明森林旅游园区污水处理站",
    "DM": "1816# 森林公园污水站排放口",
    "SJ": "2024-09-06 01:04:00",
    "ph": "7.04N",
    "RJY": "12.5886N",
    "COD": "5.96N",
    "TOC": "",
    "AD": "0.0010N",
    "TP": "0.142N",
    "TN": "4.66N",
    "lj": "41.5996N",
    "lj2": ""

  },
  {
    "HL": "崇明森林旅游园区污水处理站",
    "DM": "1816# 森林公园污水站排放口",
    "SJ": "2024-09-06 01:04:00",
    "ph": "6.04N",
    "RJY": "12.5886N",
    "COD": "5.96N",
    "TOC": "",
    "AD": "0.0010N",
    "TP": "0.142N",
    "TN": "4.66N",
    "lj": "41.5996N",

  },


])
const columns = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "企业名称",
    dataIndex: "HL"
  },
  {
    title: "测点名称",
    dataIndex: "DM",
    align: "center"
  },
  {
    title: "数据时间",
    dataIndex: "SJ",
    width: 120
  },
  {
    title: "PH",
    dataIndex: "ph"
  },
  {
    title: "瞬时流量(l/s)",
    dataIndex: "RJY"
  },
  {
    title: "COD浓度值((mg/L))",
    dataIndex: "COD",
    align: "center",
    width: 120
  },
  {
    title: "TOC浓度值((mg/L))",
    dataIndex: "TOC",
    width: 120
  },
  {
    title: "氨氛浓度值(mg/L)",
    dataIndex: "AD"
  },
  {
    title: "TP浓度值(mg/L)",
    dataIndex: "TP"
  },
  {
    title: "TN浓度值(mg/L)",
    dataIndex: "TN"
  },
  {
    title: "累积流量(m3)",
    dataIndex: "lj"
  },
  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];


const tableData2=ref([

{
  "HL": "上海华润大东船务工程有限公司",
  "DM": "080# 华润大东3#出口",
  "SJ": "2025-07-15 01:04:00",
  "ph": "7.54N",
  "RJY": "12.5886N",
  "COD": "5.96N",
  "TOC": "",
  "AD": "0.0010N",
  "TP": "0.142N",
  "TN": "4.66N",
  "lj": "70148.14N",
  "lj2": "",
  "lj3": "70148.14N",
  "lj4": "50148.14N",
  "lj5": "0.14N",
  "lj6": "70.14N",
  "lj7": "708.14N",
},
{
  "HL": "上海华润大东船务工程有限公司",
  "DM": "080# 华润大东3#出口",
  "SJ": "2025-07-15 01:23:59",
  "ph": "8.04N",
  "RJY": "12.5886N",
  "COD": "5.96N",
  "TOC": "",
  "AD": "0.0010N",
  "TP": "0.142N",
  "TN": "4.66N",
  "lj": "60248.14N",
  "lj2": "",
  "lj3": "7148.14N",
  "lj4": "148.14N",
  "lj5": "48.14N",
  "lj6": "8.14N",
  "lj7": "48.1N",
},
{
  "HL": "上海华润大东船务工程有限公司",
  "DM": "080# 华润大东3#出口",
  "SJ": "2025-07-15 01:23:59",
  "ph": "6.04N",
  "RJY": "12.5886N",
  "COD": "5.96N",
  "TOC": "",
  "AD": "0.0010N",
  "TP": "0.142N",
  "TN": "4.66N",
  "lj": "80148.14N",
  "lj2": "",
  "lj3": "148.14N",
  "lj4": "158.14N",
  "lj5": "55.14N",
  "lj6": "69.14N",
  "lj7": "76.14N",
},
])

const columns2 = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number }) => {
      return rowIndex + 1
    }
  },
  {
    title: "企业名称",
    dataIndex: "HL",
    width: 120
  },
  {
    title: "测点名称",
    dataIndex: "DM",
    align: "center",
    width: 120
  },
  {
    title: "数据时间",
    dataIndex: "SJ",
    width: 120
  },
  {
    title: "非甲烷总烃实测浓度mg/m3",
    dataIndex: "ph",
    width: 120
  },
  {
    title: "非甲烷总烃基准氧含量浓度mg/m3",
    dataIndex: "lj2",
    width: 120
  },
  {
    title: "非甲烷总烃排放量kg",
    dataIndex: "COD",
    align: "center",
    width: 120
  },
  {
    title: "NOx实测浓度mg/m3",
    dataIndex: "TOC",
    width: 120
  },
  {
    title: "NOx 排放量kg",
    dataIndex: "lj2",
    width: 120
  },
  {
    title: "NOx基准氧含量浓度mg/m³",
    dataIndex: "lj2",
    width: 120
  },
  {
    title: "氧气含量%",
    dataIndex: "lj2",
    width: 120
  },
  {
    title: "热态风量m³",
    dataIndex: "lj",
    width: 120
  },
  {
    title: "标态风量m³",
    dataIndex: "lj3",
    width: 120
  },
  {
    title: "烟气流速m/3",
    dataIndex: "lj4",
    width: 120
  },
  {
    title: "烟气温度℃",
    dataIndex: "lj5",
    width: 120
  },
  {
    title: "烟气温度平均值",
    dataIndex: "lj6",
    width: 120
  },
  {
    title: "静压kpa",
    dataIndex: "lj7",
    width: 120
  },
  
  // /标态风量m³
  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];
const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  getCommonTableList();
};
const loading = ref<boolean>(false);
const data = reactive<List[]>([]);
const getCommonTableList = async () => {
  try {
    loading.value = true;
    // let res = await getCommonTableListAPI();
    // Object.assign(data, res.data.list);
    // pagination.value.total = res.data.total;
  } finally {
    loading.value = false;
  }
};
getCommonTableList();
</script>

<style lang="scss" scoped>
.search-btn {
  margin-bottom: 20px;
}
</style>